<template>
  <div class="page">
    <div class="s-search p20">
      <el-form
        :model="alone.searchForm.data"
        status-icon
        ref="ruleForm"
        :inline="true"
        class="demo-ruleForm"
      >
        <el-form-item>
          <el-input
            placeholder="请输入主播昵称或姓名搜索"
            v-model="alone.searchForm.data.realName"
          >
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-input
            placeholder="请输入直播间Id搜索"
            v-model="alone.searchForm.data.anchorNo"
          >
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="alone.searchForm.data.signStatus"
            placeholder="请选择状态类型"
          >
            <el-option label="所有状态" value=""> </el-option>
            <el-option label="试播" value="SIGNING"> </el-option>
            <el-option label="已开播" value="SIGNED"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="rSubmitSearchForm">搜索</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="c-main p20">
      <div class="c-aside clearfix">
        <el-button
          type="primary"
          class="fr btn"
          @click="rToUrl"
          v-hasAuth:ally_create
          >新增</el-button
        >
        <el-upload
          class="diy-uploadBtn fr"
          v-hasAuth:ally_import
          :action="uploadAjax.config.url"
          :headers="uploadAjax.config.headers"
          :multiple="false"
          ref="uploadExcel"
          accept=".zip, .xlsx, xls"
          :show-file-list="false"
          :disabled="uploadAjax.config.disabled"
          :on-success="rUploadExcelSuc"
          :on-error="rUploadExcelFail"
          :on-progress="rUploadExcelProgress"
          :before-upload="rUploadBefore"
          :limit="1"
        >
          <el-button type="primary" plain>导入主播</el-button>
        </el-upload>
        <el-link
          type="primary"
          href="https://test.yj543.com/upload/2020-05-06/template/联营导入主播数据模板.xlsx"
          v-hasAuth:ally_create
          class="fr btn  btn-diy"
          target="_blank"
          >导入模板下载</el-link
        >
      </div>
      <div class="clearfix">
        <div class="fl">
          总共：{{ pageAjax.paging.total }} 条
          <!-- <span class="text-warning ml20"
            >试播主播超过24小时不填写直播间信息则自动释放，重新显示在签约大厅</span
          > -->
        </div>
      </div>
      <div class="c-section">
        <div class="c-body">
          <el-table :data="pageAjax.data" stripe style="width: 100%">
            <el-table-column label="头像">
              <template slot-scope="scope">
                <img class="c-avatar" :src="scope.row.headImg" alt="" />
              </template>
            </el-table-column>
            <el-table-column prop="nickName" label="昵称">
              <template slot-scope="scope">
                <div class="">
                  {{ scope.row.nickName }}
                  <span v-if="scope.row.hasLiveExperience" class="text-warning"
                    >(有直播经验)</span
                  >
                  <span v-else>(无直播经验)</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="微信号">
              <template slot-scope="scope">
                <div class="">
                  {{ scope.row.wxNo || "无" }}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="联系电话">
              <template slot-scope="scope">
                <div class="">
                  {{ scope.row.contractPhone || "无" }}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="绑定运营">
              <template slot-scope="scope">
                <div class="">
                  {{ scope.row.bindingNickName || "无" }}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="签约状态">
              <template slot-scope="scope">
                <div class="">
                  {{
                    $store.state.SIGN.STATUS.translate[scope.row.signStatus] ||
                      "无"
                  }}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="直播间信息">
              <template slot-scope="scope">
                <div
                  class=""
                  v-if="
                    scope.row.liveBroadcastVos &&
                      scope.row.liveBroadcastVos.length
                  "
                >
                  <p v-for="item in scope.row.liveBroadcastVos" :key="item.id">
                    {{
                      translate.biPlatformList[item.platform] +
                        "-" +
                        item.anchorNo
                    }}
                  </p>
                </div>
                <div class="text-warning" v-else>
                  无
                </div>
                <!-- <div v-else>
                  无，剩余填写时间：{{
                    getCountdown(scope.row.countdown * 1000) || "无"
                  }}
                </div> -->
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="small"
                  v-hasAuth:ally_detail
                  @click="navToDetail(scope.row.anchorId)"
                  >详情</el-button
                >
                <el-button
                  type="text"
                  size="small"
                  v-hasAuth:ally_edit
                  @click="navToEdit(scope.row.anchorId)"
                  >修改</el-button
                >
                <el-button
                  type="text"
                  size="small"
                  v-hasAuth:ally_liveDetail
                  @click="navToLiveDetail(scope.row.anchorId)"
                  >直播间信息</el-button
                >

                <el-button
                  type="text"
                  size="small"
                  v-hasAuth:ally_actorStatusChange
                  @click="
                    rChangeStatus(scope.row.anchorId, scope.row.signStatus)
                  "
                  >更改状态</el-button
                >
                <el-button
                  type="text"
                  size="small"
                  v-hasAuth:ally_delete
                  @click="rDeleteActor(scope.row.anchorId)"
                  >删除主播</el-button
                >
                <span
                  v-hasAuth:ally_detail-ally_edit-ally_liveDetail-ally_actorStatusChange-ally_delete.invert
                  >—</span
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="c-footer">
          <div class="c-pagination">
            <el-pagination
              layout="prev, pager, next"
              @current-change="rPagingChange"
              @prev-click="rPagingChange"
              @next-click="rPagingChange"
              :current-page="pageAjax.paging.current"
              :total="pageAjax.paging.total"
            >
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
    <!-- statusDrawerCp -->
    <el-drawer
      :title="statusDrawerCp.config.title"
      :visible.sync="statusDrawerCp.config.visible"
      :direction="statusDrawerCp.config.direction"
    >
      <el-row class="f-status">
        <el-col :span="8" :offset="8">
          <el-form ref="status" label-width="80px">
            <el-form-item label="签约状态">
              <el-select
                v-model="statusDrawerCp.data.signStatus"
                placeholder="请选择签约状态"
              >
                <el-option
                  :label="item.name"
                  :value="item.value"
                  v-for="item in translate.STATUS.list"
                  :key="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="rSubmitStatusForm"
                >提交</el-button
              >
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </el-drawer>
  </div>
</template>
<script>
import {
  getActorListByUnion,
  changeActorStatus,
  deleteActorByUnion
} from "@/api/actor.js";
import { getBiPlatformList } from "@/api/others.js";
import { mixin } from "@/components/mixin/getSalaryStr.js";
import _ from "lodash";

export default {
  name: "agent_signingList",
  mixins: [mixin],
  data: () => ({
    pageAjax: {
      btnDisabled: false,
      btnLoading: false,
      loading: false,
      lock: false,
      paging: {
        pages: 1, // 总页数
        current: 0, // 当前页
        total: 1, // 总数量
        pageSize: 10 // 每页数量
      },
      data: []
    },
    biPlatformListSupAjax: {
      data: []
    },
    uploadAjax: {
      loading: false,
      config: {
        disabled: false,
        headers: {
          Authorization: ""
        },
        url:
          "/bs/union/importUnionExcel/" +
          JSON.parse(localStorage.getItem("currentCorporation")).id
      }
    },
    alone: {
      searchForm: {
        loading: false,
        data: {
          realName: "",
          relType: 2,
          anchorNo: "",
          signStatus: ""
        }
      }
    },
    translate: {
      STATUS: {
        list: [
          {
            name: "试播",
            value: "SIGNING"
          },
          {
            name: "已开播",
            value: "SIGNED"
          }
        ]
      },
      biPlatformList: {}
    },
    statusDrawerCp: {
      loading: false,
      config: {
        title: "",
        visible: false,
        direction: "ttb",
        size: "20%"
      },
      data: {
        signStatus: "",
        anchorId: ""
      }
    }
  }),
  created() {
    let _that = this;
    _that.uploadAjax.config.headers.Authorization =
      "bearer " + _that.$store.state.sid.access_token;
    _that.getBiPlatformListData().then(() => {
      _that.getPageData();
    });
  },
  methods: {
    rSubmitSearchForm() {
      let _that = this;
      if (_that.pageAjax.loading) {
        return;
      }
      _that.pageAjax.lock = false;
      _that.pageAjax.paging.current = 0;
      // if (!searchForm.data.searchStr && !searchForm.data.signWish && !searchForm.data.platform) {
      //   _that.$message.error({message: "搜索条件不能都为空", onClose: () => {
      //     _that.alone.searchForm.loading = false;
      //   }});
      //   return;
      // }
      _that.pageAjax.lock = false;
      _that.pageAjax.paging.current = 0;
      _that.getPageData();
    },
    rUploadExcelSuc(respData) {
      let _that = this;
      _that.uploadAjax.config.disabled = false;
      _that.uploadAjax.loading.close();
      if (respData.code === _that.STATUS.success[0]) {
        let str = "";
        if (respData.data && respData.data.length) {
          respData.data.forEach(item => {
            str += "<p>" + item + "</p>";
          });
        }
        str = str || "上传成功";
        _that.$alert(
          '<div style="line-height: 2; overflow: auto;height: 400px;">' +
            str +
            "</div>",
          "数据导入提示",
          {
            confirmButtonText: "确定",
            dangerouslyUseHTMLString: true,
            callback: () => {
              _that.$refs.uploadExcel.clearFiles();
              // location.reload();
            }
          }
        );
      } else {
        _that.$message.error({
          message: respData.msg || "上传失败",
          onClose() {
            // location.reload();
            _that.$refs.uploadExcel.clearFiles();
          }
        });
      }
      _that.pageAjax.paging.current = 0;
      _that.getPageData();
    },
    rUploadExcelFail() {
      let _that = this;
      _that.uploadAjax.loading.close();
      _that.uploadAjax.config.disabled = false;
      _that.$refs.upload.clearFiles();
      _that.$message.error({
        message: "上传错误，请查看网络或联系管理员",
        onClose() {
          location.reload();
        }
      });
    },
    rUploadExcelProgress() {},
    rUploadBefore() {
      this.uploadAjax.loading = this.$loading({
        text: "上传中。。。",
        lock: true
      });
    },
    rPagingChange(e) {
      let _that = this;
      _that.pageAjax.paging.current = e - 1;
      _that.getPageData();
    },
    rChangeStatus(anchorId, signStatus) {
      let _that = this;

      _that.statusDrawerCp.config.visible = true;
      _that.statusDrawerCp.data.anchorId = anchorId;
      _that.statusDrawerCp.data.signStatus = signStatus;
    },
    rDeleteActor(id) {
      let _that = this;
      this.$confirm("你确定要删除此数据?", "删除提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          deleteActorByUnion({ anchorId: id }).then(resp => {
            let respData = resp.data || {};

            if (respData.code === _that.STATUS.success[0]) {
              _that.$message.success(respData.msg || "删除成功");
              _that.pageAjax.paging.current =
                _that.pageAjax.paging.current > 0
                  ? _that.pageAjax.paging.current - 1
                  : 0;
              _that.getPageData();
            } else {
              _that.$message.error(respData.msg || "删除失败");
            }
          });
        })
        .catch(() => {});
    },
    rSubmitStatusForm() {
      let _that = this;
      let signStatus = _that.statusDrawerCp.data.signStatus;
      let anchorId = _that.statusDrawerCp.data.anchorId;
      if (!signStatus || _that.statusDrawerCp.loading) {
        return;
      }

      _that.statusDrawerCp.loading = true;
      changeActorStatus({ anchorId: anchorId, signStatus: signStatus })
        .then(resp => {
          let respData = resp.data || {};

          if (respData.code === _that.STATUS.success[0]) {
            _that.$message.success(respData.msg || "修改成功");
            _that.statusDrawerCp.config.visible = false;
            _that.pageAjax.paging.current =
              _that.pageAjax.paging.current > 0
                ? _that.pageAjax.paging.current - 1
                : 0;
            _that.getPageData();
          } else {
            _that.$message.error(respData.msg || "修改失败");
          }
        })
        .finally(() => {
          _that.statusDrawerCp.loading = false;
        });
    },
    getBiPlatformListData() {
      let _that = this;
      return getBiPlatformList()
        .then(resp => {
          let respData = resp.data || {};

          if (respData.code === _that.STATUS.success[0]) {
            let translate = {};
            let arr = respData.data.filter(item => {
              if (item.value != "all") {
                translate[item.value] = item.name;
                return item;
              }
            });
            _that.biPlatformListSupAjax.data = arr;

            _that.translate.biPlatformList = translate;
          } else {
            _that.$message.error(respData.msg || "获取失败");
          }
        })
        .finally(() => {});
    },
    getPageData() {
      let _that = this;
      let searchForm = _.cloneDeep(_that.alone.searchForm);
      let pageAjax = _that.pageAjax;

      if (pageAjax.loading || pageAjax.lock) {
        return;
      }

      let data = { ...searchForm.data };
      data.pageNo = _that.pageAjax.paging.current + 1;
      _that.pageAjax.loading = true;
      getActorListByUnion(data)
        .then(resp => {
          let respData = resp.data || {};
          if (respData.code === _that.STATUS.success[0]) {
            _that.pageAjax.data = _.cloneDeep(respData.data.list);
            // _that.startCountDown();
            _that.pageAjax.paging = {
              pages: respData.data.pagination.pages,
              current: respData.data.pagination.current,
              total: respData.data.pagination.total,
              pageSize: respData.data.pagination.pageSize
            };
          } else {
            _that.$message.error(respData.msg || "获取失败");
          }
        })
        .finally(() => {
          _that.pageAjax.loading = false;
        });
    },
    rToUrl() {
      this.$router.push({ name: "ally_create" });
    },
    navToDetail(id) {
      this.$router.push({
        name: "ally_detail",
        query: {
          anchorId: id
        }
      });
    },
    navToEdit(id) {
      this.$router.push({
        name: "ally_edit",
        query: {
          anchorId: id
        }
      });
    },
    navToLiveDetail(id) {
      this.$router.push({
        name: "ally_liveDetail",
        query: {
          anchorId: id
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.page {
  .s-search {
    border-bottom: 1px solid #eee;
  }
  .c-aside {
    .btn {
      margin-right: 20px;
    }
    .diy-uploadBtn {
      margin-right: 20px;
    }
  }
  .c-main {
    margin-top: 20px;
    .c-avatar {
      display: block;
      width: 100px;
      height: 100px;
      border-radius: 50%;
    }
  }
  .c-pagination {
    margin-top: 20px;
    text-align: center;
  }
  .f-agentWish {
    overflow: hidden;
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    bottom: 0;
    .c-content {
      height: 100%;
      padding-bottom: 20px;
      overflow: auto;
    }
    .c-card {
      .c-item {
        padding-bottom: 20px;
        border-top: 1px solid #f5f7fa;
      }
      .c-UserInfo {
        position: relative;
        overflow: hidden;
        line-height: 25px;
      }
      .c-avatar {
        float: left;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        overflow: hidden;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .c-nameInfo {
        float: left;
        margin-left: 20px;
      }
      .c-copyBtn {
        cursor: pointer;
        position: absolute;
        right: 0;
        top: 0;
        border: 1px solid #eee;
        padding: 10px 20px;
        border-radius: 20px;
      }
      .c-bid {
        overflow: hidden;
        line-height: 30px;
        img {
          float: left;
          width: 30px;
          height: 30px;
          margin-right: 20px;
        }
      }
    }
  }
  .f-agent {
    overflow: hidden;
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    bottom: 0;
    .c-content {
      height: 100%;
      padding-bottom: 20px;
      padding-top: 60px;
      overflow: auto;
    }
    .c-avatar {
      width: 80px;
      height: 80px;
    }
  }
}
</style>
<style lang="scss">
.page {
  .el-drawer__header {
    position: relative;
    z-index: 10;
  }
  .btn-diy {
    line-height: 35.6px;
  }
}
</style>
